<template>
  <section>
    <el-button @click="clearStatistics" type="primary">清空统计</el-button>
    <h2 v-if="chartData.length === 0">没有找到练习记录</h2>
    <template v-else>
      <echarts :chart-data="chartData"></echarts>
      <my-table :table-data="chartData"></my-table>
    </template>
  </section>
</template>

<script>
  import {getLocalData} from '@/utils/localData'
  import Echarts from './Echarts'
  import MyTable from './Table'

  export default {
    data() {
      return {
        chartData: []
      }
    },
    methods: {
      getData() {
        this.chartData = getLocalData('STATISTICS') || []
      },
      clearStatistics() {
        this.$alert('是否确认清空数据', {showCancelButton: true}).then(() => {
          localStorage.clear()
          this.chartData = []
        })
      }
    },
    mounted() {
      this.getData()
    },
    components: {
      Echarts,
      MyTable
    }
  }
</script>
